import './App.scss'
import { useState } from 'react'
import { } from '@ant-design/icons'
import { Menu } from 'antd'
import { Outlet, Link } from 'react-router-dom'
import { useStore } from '../src/store'
import { useEffect } from 'react'

function getItem (label, key, children, theme) {
  return {
    key,
    children,
    label,
    theme,
  }
}
function App () {

  const { userInforStore } = useStore()
  useEffect(() => {
    userInforStore.getUserInfor()
    if (userInforStore.userInfor.identity === 0) {
      setType('student')
    } else {
      setType('/myIndex')
    }
  }, [userInforStore])
  const [type, setType] = useState('/myIndex')
  const [current, setCurrent] = useState('1')

  const onClick = (e) => {
    setCurrent(e.key)
  }

  const items = [
    getItem(
      <Link to={'/'} className='link-sty' >首页</Link>,
      'sub1',
    ),
    getItem(
      '更多',
      'sub2',
      [getItem(<a href="https://react.docschina.org/docs/getting-started.html">关于React</a>, '4'),
      getItem(<a href="https://ant.design/docs/react/introduce-cn">关于Ant Design</a>, '5'),],
    ),
    getItem(
      '关于',
      'sub3',
      [getItem('团队成员', '7'), getItem('技术栈', '8'), getItem('目的', '9')],
    ),
    getItem(
      <Link to={type} className='link-sty'>我的</Link>,
      'sub4',
    ),
    getItem(
      <Link to={'/login'} className='link-sty'>登录</Link>,
      'sub5',
    ),
  ]
  return (
    <div className='container-all'>
      <div className='menu-box'>
        <div></div>
        <Menu
          className='menu'
          onClick={onClick}
          defaultOpenKeys={['sub1']}
          selectedKeys={[current]}
          mode="vertical"
          items={items}
        />
      </div>
      <div className='content-box'>
        <Outlet />
      </div>
    </div>


  )
}

export default App
